<template>
    <div class="fillContainer">
        <div>
            <el-form :inline="true" ref="add_data" :model="search_data">
                <el-form-item label="按照时间筛选">
                    <el-date-picker v-model="search_data.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker> --
                    <el-date-picker v-model="search_data.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
                </el-form-item> 
                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">筛选</el-button>
                </el-form-item>
                <el-form-item class="btnRight">
                    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleAdd" v-if="user.identity=='manager'">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table_contai">
            <el-table v-if="tableData.length>0" :data="tableData" style="width: 100%" border stripe max-height="450px">
                <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
                <el-table-column prop="date" label="创建时间" align="center" width="280">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="收支类型" align="center" width="150"></el-table-column>
                <el-table-column prop="describe" label="收支描述" align="center" width="180"></el-table-column>
                <el-table-column prop="income" label="收入" align="center" width="100">
                    <template slot-scope="scope">
                        <span style="color:#00d053">{{ scope.row.income }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="expend" label="支出" align="center" width="100">
                    <template slot-scope="scope">
                        <span style="color:#f56767">{{ scope.row.expend }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cash" label="账户现金" align="center" width="100">
                    <template slot-scope="scope">
                        <span style="color:#4db3ff">{{ scope.row.cash }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="200" v-if="user.identity=='manager'">
                    <template slot-scope="scope">
                        <el-button icon="edit" size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button icon="delete" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paginations.page_index" :page-sizes="paginations.page_sizes" :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total"></el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
        <dialog-fund :dialog="dialog" :formData="formData" @update="getProfile"></dialog-fund>
    </div>
</template>
<script>
import DialogFund from '../components/DialogFund'
export default {
    components:{
        'dialog-fund':DialogFund
    },
    computed: {
        user(){
            return this.$store.getters.user
        }
    },
    data() {
        return {
            tableData:[],
            formData:{
                type:'',
                describe:'',
                income:'',
                expend:'',
                cash:'',
                remark:'',
                id:''
            },
            dialog:{
                show:false,
                title:'',
                option:'edit'
            },
            // 分页
            paginations:{
                page_index:1,//当前位于哪页
                total:0, //总数
                page_size:5,//一页显示多少条
                page_sizes:[5,10,15,20],//每页显示多少条
                layout:'total, sizes, prev, pager, next, jumper'
            },
            // 分页存放数据
            allTableData:[],
            // 筛选日期存放数据
            filterTableDate:[],
            // 筛选日期
            search_data:{
                startTime:'',
                endTime:''
            }
        }
    },
    created() {
        this.getProfile()
    },
    methods: {
        getProfile(){
            //获取表格数据
            this.$axios.get('/api/profiles').then((res) => {
                // console.log(res)
                this.allTableData=res.data
                this.filterTableDate=res.data
                // 设置分页数据
                this.setPaginations()
            }).catch((err) => {
                console.log(err)
            });
        },
        handleEdit(index,row){
            // 编辑
            this.dialog={
                show:true,
                title:'修改资金信息',
                option:'edit'
            }
            this.formData={
                type:row.type,
                describe:row.describe,
                income:row.income,
                expend:row.expend,
                cash:row.cash,
                remark:row.remark,
                id:row._id,
            }
        },
        handleDelete(index,row){
            this.$axios.delete(`/api/profiles/delete/${row._id}`).then((res) => {
                this.$message.success('删除成功！')
            }).catch((err) => {
                this.$message.success('删除失败！')
            });
            this.getProfile()
        },
        handleAdd(){
            // 添加
            this.dialog={
                show:true,
                title:'添加资金信息',
                option:'add'
            }
            this.formData={
                type:'',
                describe:'',
                income:'',
                expend:'',
                cash:'',
                remark:'',
                id:''
            }
        },
        // 分页大小改变
        handleSizeChange(page_size){
            this.paginations.page_index=1
            this.paginations.page_size=page_size
            this.tableData=this.allTableData.filter((item,index)=>{
                return index<this.paginations.page_size
            })
        },
        //获取当前页
        handleCurrentChange(page){
            //获取当前页
            let index=this.paginations.page_size*(page-1)
            //数据的总数
            let nums=this.paginations.page_size*page
            //容器
            let tables=[]
            for(let i=index;i<nums;i++){
                if(this.allTableData[i]){
                    tables.push(this.allTableData[i])
                }
                this.tableData=tables
            }
        },
        // 设置分页数据
        setPaginations(){
            // 分页属性设置
            this.paginations.total=this.allTableData.length
            this.paginations.page_index=1
            this.paginations.page_size=5
            // 设置默认的分页数据
            this.tableData=this.allTableData.filter((item,index)=>{
                return index<this.paginations.page_size//展示5条
            })
        },
        // 筛选日期
        handleSearch(){
            if(!this.search_data.startTime||!this.search_data.endTime){
                this.$message.warning('请选择时间区间')
                this.getProfile()
                return
            }
            const sTime=this.search_data.startTime.getTime()
            const eTime=this.search_data.endTime.getTime()
            this.allTableData=this.filterTableDate.filter(item=>{
                let date=new Date(item.date)
                let time=date.getTime()
                return time>=sTime && time<=eTime
            })
            // 调用分页数据
            this.setPaginations()
        }
    },
}
</script>
<style scoped>
.fillContainer {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
</style>